<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue';

import {
  Button,
  Card,
  Col,
  Form,
  Input,
  message,
  Row,
  Select,
  Space,
  Table,
  Tag,
  Typography,
} from 'ant-design-vue';

import OrderManagementLayout from './layout.vue';

const { Title } = Typography;

// 公安上传记录数据
const uploadRecords = ref([
  {
    id: '1',
    guestName: '',
    roomNumber: '',
    idNumber: '',
    businessType: '入住',
    uploadTime: '2025-08-11 15:00:47',
    returnResult: '身份证证件号不正确',
    status: '失败',
  },
  {
    id: '2',
    guestName: '',
    roomNumber: '',
    idNumber: '',
    businessType: '入住',
    uploadTime: '2025-08-11 15:05:30',
    returnResult: '身份证证件号不正确',
    status: '失败',
  },
  {
    id: '3',
    guestName: '',
    roomNumber: '',
    idNumber: '',
    businessType: '入住',
    uploadTime: '2025-08-11 15:10:15',
    returnResult: '身份证证件号不正确',
    status: '失败',
  },
  {
    id: '4',
    guestName: '',
    roomNumber: '',
    idNumber: '',
    businessType: '入住',
    uploadTime: '2025-08-11 15:15:20',
    returnResult: '身份证证件号不正确',
    status: '失败',
  },
  {
    id: '5',
    guestName: '哈兴清',
    roomNumber: '',
    idNumber: '',
    businessType: '退房',
    uploadTime: '2025-08-11 15:20:45',
    returnResult: '{"succeed":false,"result":"非法参数,无法上传!"}',
    status: '失败',
  },
  {
    id: '6',
    guestName: '',
    roomNumber: '',
    idNumber: '',
    businessType: '入住',
    uploadTime: '2025-08-11 15:25:10',
    returnResult: '身份证证件号不正确',
    status: '失败',
  },
  {
    id: '7',
    guestName: '',
    roomNumber: '',
    idNumber: '',
    businessType: '入住',
    uploadTime: '2025-08-11 15:30:25',
    returnResult: '身份证证件号不正确',
    status: '失败',
  },
  {
    id: '8',
    guestName: '',
    roomNumber: '',
    idNumber: '',
    businessType: '入住',
    uploadTime: '2025-08-11 15:35:40',
    returnResult: '身份证证件号不正确',
    status: '失败',
  },
  {
    id: '9',
    guestName: '',
    roomNumber: '',
    idNumber: '',
    businessType: '入住',
    uploadTime: '2025-08-11 15:40:55',
    returnResult: '身份证证件号不正确',
    status: '失败',
  },
  {
    id: '10',
    guestName: '',
    roomNumber: '',
    idNumber: '',
    businessType: '入住',
    uploadTime: '2025-08-11 15:45:30',
    returnResult: '身份证证件号不正确',
    status: '失败',
  },
]);

// 搜索表单
const searchForm = reactive({
  guestName: '',
  idNumber: '',
  roomNumber: '',
  businessType: '',
  status: '失败',
});

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 402,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条数据`,
});

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colors = {
    成功: 'green',
    失败: 'red',
    处理中: 'orange',
  };
  return colors[status] || 'default';
};

// 获取业务类型颜色
const getBusinessTypeColor = (type: string) => {
  const colors = {
    入住: 'blue',
    退房: 'orange',
    续住: 'purple',
  };
  return colors[type] || 'default';
};

// 表格列定义
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    width: 60,
  },
  {
    title: '宾客姓名',
    dataIndex: 'guestName',
    key: 'guestName',
    width: 120,
  },
  {
    title: '房间编号',
    dataIndex: 'roomNumber',
    key: 'roomNumber',
    width: 120,
  },
  {
    title: '证件编号',
    dataIndex: 'idNumber',
    key: 'idNumber',
    width: 150,
  },
  {
    title: '业务类型',
    dataIndex: 'businessType',
    key: 'businessType',
    width: 100,
  },
  {
    title: '上传时间',
    dataIndex: 'uploadTime',
    key: 'uploadTime',
    width: 150,
  },
  {
    title: '返回结果',
    dataIndex: 'returnResult',
    key: 'returnResult',
    width: 200,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 80,
  },
];

// 过滤后的数据
const filteredRecords = computed(() => {
  let result = uploadRecords.value;

  if (searchForm.guestName) {
    result = result.filter((record) =>
      record.guestName
        .toLowerCase()
        .includes(searchForm.guestName.toLowerCase()),
    );
  }

  if (searchForm.idNumber) {
    result = result.filter((record) =>
      record.idNumber.toLowerCase().includes(searchForm.idNumber.toLowerCase()),
    );
  }

  if (searchForm.roomNumber) {
    result = result.filter((record) =>
      record.roomNumber
        .toLowerCase()
        .includes(searchForm.roomNumber.toLowerCase()),
    );
  }

  if (searchForm.businessType) {
    result = result.filter(
      (record) => record.businessType === searchForm.businessType,
    );
  }

  if (searchForm.status && searchForm.status !== '全部') {
    result = result.filter((record) => record.status === searchForm.status);
  }

  return result;
});

// 公安上传记录统计
const uploadStatistics = computed(() => {
  const total = uploadRecords.value.length;
  const success = uploadRecords.value.filter((r) => r.status === '成功').length;
  const failed = uploadRecords.value.filter((r) => r.status === '失败').length;
  const processing = uploadRecords.value.filter(
    (r) => r.status === '处理中',
  ).length;

  return {
    total,
    success,
    failed,
    processing,
  };
});

// 搜索
const handleSearch = () => {
  pagination.current = 1;
  message.success('搜索完成');
};

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    guestName: '',
    idNumber: '',
    roomNumber: '',
    businessType: '',
    status: '失败',
  });
  pagination.current = 1;
  message.success('重置完成');
};

// 重新上传
const reupload = (record: any) => {
  message.success(`正在为 ${record.guestName || record.roomNumber} 重新上传`);
};

// 查看详情
const viewDetail = (record: any) => {
  message.info(`查看上传记录详情: ${record.id}`);
};

// 手动上传
const manualUpload = () => {
  message.info('手动上传功能开发中...');
};

onMounted(() => {
  // 初始化数据
});
</script>

<template>
  <OrderManagementLayout>
    <div class="security-upload">
      <!-- 页面标题 -->
      <div class="page-header">
        <Title level="2">公安上传记录</Title>
      </div>

      <!-- 统计信息 -->
      <Row :gutter="16" class="statistics-row">
        <Col :span="6">
          <Card class="stat-card">
            <div class="stat-content">
              <div class="stat-number total">{{ uploadStatistics.total }}</div>
              <div class="stat-label">总记录数</div>
            </div>
          </Card>
        </Col>
        <Col :span="6">
          <Card class="stat-card">
            <div class="stat-content">
              <div class="stat-number success">
                {{ uploadStatistics.success }}
              </div>
              <div class="stat-label">上传成功</div>
            </div>
          </Card>
        </Col>
        <Col :span="6">
          <Card class="stat-card">
            <div class="stat-content">
              <div class="stat-number failed">
                {{ uploadStatistics.failed }}
              </div>
              <div class="stat-label">上传失败</div>
            </div>
          </Card>
        </Col>
        <Col :span="6">
          <Card class="stat-card">
            <div class="stat-content">
              <div class="stat-number processing">
                {{ uploadStatistics.processing }}
              </div>
              <div class="stat-label">处理中</div>
            </div>
          </Card>
        </Col>
      </Row>

      <!-- 搜索表单 -->
      <Card class="search-card">
        <Form layout="inline" :model="searchForm" class="search-form">
          <Form.Item label="宾客姓名">
            <Input
              v-model="searchForm.guestName"
              placeholder="请输入姓名"
              allow-clear
              style="width: 150px"
            />
          </Form.Item>
          <Form.Item label="证件编号">
            <Input
              v-model="searchForm.idNumber"
              placeholder="请输入证件号"
              allow-clear
              style="width: 150px"
            />
          </Form.Item>
          <Form.Item label="房间编号">
            <Input
              v-model="searchForm.roomNumber"
              placeholder="请输入房间号"
              allow-clear
              style="width: 150px"
            />
          </Form.Item>
          <Form.Item label="业务类型">
            <Select
              v-model="searchForm.businessType"
              placeholder="请选择类型"
              allow-clear
              style="width: 120px"
            >
              <Select.Option value="入住">入住</Select.Option>
              <Select.Option value="退房">退房</Select.Option>
              <Select.Option value="续住">续住</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="状态">
            <Select v-model="searchForm.status" style="width: 120px">
              <Select.Option value="全部">全部</Select.Option>
              <Select.Option value="成功">成功</Select.Option>
              <Select.Option value="失败">失败</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Space>
              <Button @click="handleReset">重置</Button>
              <Button type="primary" @click="handleSearch">查询</Button>
              <Button @click="manualUpload">手动上传</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>

      <!-- 公安上传记录列表 -->
      <Card title="公安上传记录" class="list-card">
        <Table
          :columns="columns"
          :data-source="filteredRecords"
          :pagination="pagination"
          row-key="id"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'businessType'">
              <Tag :color="getBusinessTypeColor(record.businessType)">
                {{ record.businessType }}
              </Tag>
            </template>
            <template v-else-if="column.key === 'returnResult'">
              <div class="return-result">
                {{ record.returnResult }}
              </div>
            </template>
            <template v-else-if="column.key === 'status'">
              <Tag :color="getStatusColor(record.status)">
                {{ record.status }}
              </Tag>
            </template>
            <template v-else-if="column.key === 'action'">
              <Space>
                <Button type="link" size="small" @click="viewDetail(record)">
                  详情
                </Button>
                <Button
                  v-if="record.status === '失败'"
                  type="link"
                  size="small"
                  @click="reupload(record)"
                >
                  重新上传
                </Button>
              </Space>
            </template>
          </template>
        </Table>
      </Card>
    </div>
  </OrderManagementLayout>
</template>

<style scoped>
.security-upload {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.statistics-row {
  margin-bottom: 24px;
}

.stat-card {
  text-align: center;
}

.stat-content {
  padding: 16px;
}

.stat-number {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: bold;
}

.stat-number.total {
  color: #1890ff;
}

.stat-number.success {
  color: #52c41a;
}

.stat-number.failed {
  color: #f5222d;
}

.stat-number.processing {
  color: #faad14;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.search-card {
  margin-bottom: 24px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.list-card {
  background: white;
}

.return-result {
  max-width: 180px;
  font-size: 12px;
  color: #666;
  word-break: break-all;
}

:deep(.ant-card-body) {
  padding: 16px;
}

:deep(.ant-table-thead > tr > th) {
  font-weight: 500;
  background-color: #fafafa;
}
</style>
